var messageApp = new Vue({
    el: '#messageApp',
    data: {
        messageList: [], //  消息列表
        selectedMessageList: [], // 选中的消息
        selectedUnReadMessageList: [], // 选中的未读的消息
        messageFilterParameters: {
            status: 0,
            pageSize: 5,
            currentPage: 1,
            searchKey: "",
            startDate: "",
            endDate: "",
        },
        showUnreadFlag: true,
        showMessageDetailModal: false,
        selectedMessage:{},
        messageListPaging: {
            current: 1,
            total: 0,
            pages: 0
        }
    },
    mounted:  function(){
        this.initData()
    },
    methods: {
        initData: function() {
            this.getMessageList()
        },
        removeSearchKey: function(event) {
            this.messageFilterParameters.searchKey = ''
            this.getMessageList()
        },
        search: function(event) {
            this.getMessageList()
        },
        // 获取消息列表
        getMessageList: function(){
            var checkBoxArr = document.getElementsByClassName("select-checkbox")
            for(var j = 0; j < checkBoxArr.length; j++) {
                checkBoxArr[j].checked = false
            }
            this.selectedMessageList = []
            this.selectedUnReadMessageList = []
            var _self = this
            var requestUrl = VUE_UTIL.buildRequestUrl('/message/list', _self.messageFilterParameters)
            VUE_UTIL.getAxiosInstance().get(requestUrl)
                .then(function(response){
                    _self.messageList = response.data.data.records;
                    _self.messageListPaging = {
                        current: response.data.data.current,
                        total: response.data.data.total,
                        pages: response.data.data.pages
                    }
                    _self.initPaging()
                })
        },
        initPaging: function() {
            var _self = this;
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage;
                laypage({
                    cont: 'turn-page',
                    curr: _self.messageListPaging.current || 1,
                    pages: _self.messageListPaging.pages,
                    skin: '#457fe6',
                    skip: true,
                    jump: function (obj, first) {
                        if (!first) {
                            _self.messageFilterParameters.currentPage = obj.curr
                            _self.getMessageList()
                        }
                    }
                });
            });
        },
        /**
         * 切换显示未读和全部
         * @param flag
         */
        showUnread: function(flag) {
            if(flag) {
                this.showUnreadFlag = true
                this.messageFilterParameters.status = 0
            } else {
                this.showUnreadFlag = false
                this.messageFilterParameters.status = 2
            }
            this.getMessageList()
        },
        /**
         * 全选
         */
        selectAll: function(event) {
            var checkBoxArr = document.getElementsByClassName("select-checkbox")
            if(event.target.checked == true) {
                this.selectedMessageList = VUE_UTIL.copyArray(this.messageList)
                this.selectedUnReadMessageList = []
                for(var i = 0; i < this.selectedMessageList.length; i++) {
                    if(this.selectedMessageList[i].status == 0) {
                        this.selectedUnReadMessageList.push(this.selectedMessageList[i])
                    }
                }
                for(var j = 0; j < checkBoxArr.length; j++) {
                    checkBoxArr[j].checked = true
                }
            } else {
                this.selectedMessageList = []
                this.selectedUnReadMessageList = []
                for(var j = 0; j < checkBoxArr.length; j++) {
                    checkBoxArr[j].checked = false
                }
            }
        },
        /**
         * 添加到已选列表
         * @param message
         */
        addToSelected: function(message,event) {
            document.getElementsByClassName("select-all")[0].checked = false
            if(event.target.checked == true) {
                this.selectedMessageList.push(message)
                if(message.status == 0) {
                    this.selectedUnReadMessageList.push(message)
                }
            } else {
                for(var i = 0; i < this.selectedMessageList.length; i++) {
                    if(this.selectedMessageList[i].id == message.id) {
                        debugger
                        this.selectedMessageList.splice(i, 1)
                    }
                }
                if(message.status == 0) {
                    for (var j = 0; j < this.selectedUnReadMessageList.length; j++) {
                        if(this.selectedUnReadMessageList[j].id == message.id) {
                            this.selectedUnReadMessageList.splice(j, 1)
                        }
                    }
                }
            }
        },
        /**
         * 查看消息详情
         * @param message
         */
        showMessageDetail: function(message) {
            var _self = this
            var id = message.id
            var requestUrl = VUE_UTIL.buildRequestUrl('/message/details', {
                id: id
            })
            VUE_UTIL.getAxiosInstance().get(requestUrl)
                .then(function(response){
                    _self.selectedMessage = response.data.data
                    _self.showMessageDetailModal = true
                })

        },
        /**
         * 标记全部已读
         */
        markAllRead: function() {
            var _self = this
            VUE_UTIL.getAxiosInstance().post("/message/markAllRead",{})
                .then(function(response){
                    layer.msg(response.data.msg, {time: 1000})
                    _self.getMessageList()
                })
        },
        /**
         * 批量删除消息
         */
        batchDelete: function() {
            var _self = this
            if(this.selectedMessageList.length == 0) {
                return false
            }
            var selectedMessageIdArr = []
            for(var i = 0; i < this.selectedMessageList.length; i ++){
                selectedMessageIdArr.push(this.selectedMessageList[i].id)
            }
            layer.alert('删除消息后无法恢复，是否确认删除？', {
                    title: '提示信息',
                    btn: ['取消', '确认'],
                    btn1: function (index) {
                        layer.close(index)
                    },
                    btn2: function () {
                        var postData = {
                            ids: selectedMessageIdArr
                        };
                        axios.post("/message/delete",postData).then(function(response){
                            layer.msg(response.data.msg, {time: 1000})
                            _self.getMessageList()
                        })
                    }
                }
            );
        },
        /**
         * 批量标记已读
         */
        markRead: function() {
            var _self = this
            if(this.selectedUnReadMessageList.length == 0) {
                return false
            }
            var selectedMessageIdArr = []
            for(var i = 0; i < this.selectedUnReadMessageList.length; i ++){
                selectedMessageIdArr.push(this.selectedUnReadMessageList[i].id)
            }
            var postData = {
                ids: selectedMessageIdArr
            }
            axios.post("/message/markRead",postData).then(function(response){
                layer.msg(response.data.msg, {time: 1000})
                _self.getMessageList()
            })
        }
    },
    filters: {
        /**
         * 格式化时间戳
         * @param time
         * @returns {*}
         */
        formatTime: function (dateStr) {
            if (dateStr == "") {
                return ""
            } else {
                var date = new Date(dateStr);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
                    + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            }
        },
        /**
         * 消息类型
         * @param type
         * @returns {*}
         */
        messageType: function(type) {
            if (type == 1) {
                return "系统消息"
            } else {
                return "即时通讯"
            }
        }
    }
})